// src/APP.vue

<template>
<div id="event-with-method">
  <div>第一种：v-on:click="methodName"或@click="methodName"</div>
  <!-- `greet` 在下面定义的方法名 -->
  <button @click="greet">Greet</button>

  <br>

  <div>第二种：v-on:click="js代码"或@click="js代码"</div>
  <button @click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>

  <br>

  <div>第三种：v-on:click="methodName('参数')"或@click="methodName('参数')"</div>
  <div id="inline-handler">
    <button @click="say('hi')">Say hi</button>
    <button @click="say('what')">Say what</button>
  </div>

  <br>

  <div>访问原始DOM事件，$event传入</div>
  <button @click="warn('Form cannot be submitted yet.', $event)">
    Submit
  </button>

</div>
</template>

<script lang="ts">
import {   defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  name:"APP",
  setup() {
    const name = ref('Vue.js')

    const greet = (event) => {
      alert('Hello ' + name.value + '!')
      // `event` 是原生 DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }

    const counter = ref(1)

    const say = (message) => alert(message)

    const warn = (message, event)  => {
      if (event) {
        event.preventDefault()
      }
      alert(message)
    }

    return {
      name,
      greet,
      counter,
      say,
      warn
    }

  }
})
</script>